<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    {% load static%}
    <link rel="stylesheet" type="text/css" href="{% static 'css/2.css' %}"/>
    <script type="text/javascript" src="{% static 'jquery/jquery-3.2.1.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'jquery/jquery.cookie.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/1.js' %}"></script>
        <script>
              $("document").ready(function(){            
                $("#yznr").click(function(){
                    document.getElementById("yznr_msg").style.display = "none";
                    //或：$(#"success_msg").style.display="none";
                    document.getElementById("yzm_msg").style.display = "none";
                    // 获取文本框的值
                    yz = $("#yz").val();
                    // 判断用户名是是否为空
                    if(yz == "" || yz.length == 0){
                        // 报错提示
                        document.getElementById("yzm_msg").innerText = "验证码不能为空";
                        return
                    }
                    console.log(yz);
                    $.ajax({
                        async: true, // 开启异步通信（默认值为true）
                        url: "/login/und1/" + yz, // ajax请求路径
                        type: "post",  // ajax请求方法
                        headers:{"X-CSRFToken":$.cookie("csrftoken")}, // 获取cookies中的csrftoken一并提交服务器
                        success: function(data){
                            console.log(data); // 测试输出
                            if(data == "True"){
                                document.getElementById("yznr_msg").innerText = "验证通过";
                                document.getElementById("yznr_msg").style.display = "block";
                                document.getElementById("yzm_msg").style.display = "none";
                            }else{
                                document.getElementById("yzm_msg").innerText = "验证码错误";
                                document.getElementById("yzm_msg").style.display = "block";
                                document.getElementById("yznr_msg").style.display = "none";
                            }
                        },
                    });
                });
            });
            $("document").ready(function(){            
        $("#yzxx").click(function(){
            document.getElementById("aa").style.display = "none";
            //或：$(#"success_msg").style.display="none";
            document.getElementById("bb").style.display = "none";
            // 获取文本框的值
            yx = $("#yx").val();
            // 判断用户名是是否为空
            if(yx == "" || yx.length == 0){
                // 报错提示
                document.getElementById("bb").innerText = "验证码不能为空";
                return
            }
            console.log(yx);
            $.ajax({
                async: true, // 开启异步通信（默认值为true）
                url: "/login/aa/" + yx, // ajax请求路径
                type: "post",  // ajax请求方法
                headers:{"X-CSRFToken":$.cookie("csrftoken")}, // 获取cookies中的csrftoken一并提交服务器
                success: function(data){
                    console.log(data); // 测试输出
                    if(data == "True"){
                        document.getElementById("aa").innerText = "发送成功";
                        document.getElementById("aa").style.display = "block";
                        document.getElementById("bb").style.display = "none";
                    }else{
                        document.getElementById("bb").innerText = "发送失败";
                        document.getElementById("bb").style.display = "block";
                        document.getElementById("aa").style.display = "none";
                    }
                },
            });
        });
    });
    </script>
</head>
<body bgcolor="mediumblue" text="red" background="{% static 'image/t01d61356d326bd0f99.jpg' %}">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span4">
            </div>
            <div class="span5">
                <h3>
                    <strong></strong>修改密码</strong>
                    <kbd>
                        register
                    </kbd>
                </h3>
            </div>
            <div class="span3">
            </div>
        </div>
        <div class="row-fluid">
            <form class="form-horizontal"  id="updateDeptFrom" name="updateDeptFrom" method="post" action="/login/abcd/" >
                {% csrf_token %}
                <div class="control-group">
                        <div class="span3">
                            </div>
                    <label class="control-label" for="number">账号</label>
                    <div class="controls">
                        <input id="number" type="text" placeholder="请输入账号" name="number"  required />

                    </div>
                </div>
                <div class="control-group">
                        <div class="span3">
                            </div>
                    <label class="control-label" for="number">qq邮箱</label>
                    <div class="controls">
                        <input id="yx" type="text" placeholder="请输入qq邮箱" name="yx" required />
                        <a id="yzxx" href="#">发送验证码</a>
                    </div>
                </div>
                <div class="control-group">
                        <div class="span3">
                            </div>
                    <label class="control-label" for="number">验证码</label>
                    <div class="controls">
                        <input id="yz" type="text" placeholder="请输入验证码" name="yz" required />
                        <a id="yznr" href="#">确认验证</a>
                    </div>
                    <div class="span5">
                        </div>
                    
                    <button type="submit" class="btn"  >验证</button>
                    <label id="aa" class="aa"></label>
                    <label id="bb" class="bb"></label>
                    <label id="yznr_msg" class="yznr_msg"></label>
                    <label id="yzm_msg" class="yzm_msg"></label>
                    
                </div>
            </form>
        </div>
    </div>
</body>

</html>